<script lang="ts" setup>
import { defineEmits } from 'vue'

// 定义子组件触发的事件
const emit = defineEmits(['switchLoginMode'])

// 点击切换模式时触发事件
const switchToPhoneLogin = () => {
  emit('switchLoginMode', 'phone')
}

const switchToQrCodeLogin = () => {
  emit('switchLoginMode', 'qrcode')
}
</script>

<template>
  <div class="switch">
    <span class="switch-span"
      >仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息
      (如手机号、身份证号等)!</span
    >
    <div class="switch-login">
      <a-button style="width: 45%" @click="switchToPhoneLogin">手机号登录</a-button>
      <a-button style="width: 45%" @click="switchToQrCodeLogin">扫码登录</a-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.switch {
  margin-top: 30px;
  &-span {
    color: red;
  }
  &-login {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
